<template>
    <el-form-item prop="thumb" label="封面" style="width:100%">
        <!--<el-upload
            ref="imguploadthumbref"
            action="#"
            list-type="picture-card"

            :on-remove="(file, fileList) => {handleOnRemove(file, fileList)}"
            multiple
            :auto-upload="false"
            class="upload-box"
            :file-list="localFormData.thumb"
        >
            <template #default>
                <div @click.stop="handleImageList" style="height:146px;width:146px;background-color:#fbfdff;border-radius:6px;border:1px dashed #c0ccda;">
                    <el-icon><plus /></el-icon>
                </div>
            </template>
            <template #file="{ file }">
            <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                >
                    <el-icon><delete /></el-icon>
                </span>
                </span>
            </div>
            </template>
        </el-upload>-->
        <ul class="imglist">
            <li v-for="(img, index) in localFormData.thumb" :key="img.relid">
                <el-image
                    :src="img.url"
                    :initial-index="index"
                    fit="scale-down" style="width:160px;height:160px"
                />
                <a class="delete-image" href="javascript:;" @click="handleDeleteImg(index)">
                    <el-icon><circle-close/></el-icon>
                </a>
            </li>
            <li class="imgplus" @click="handleImageList">
                <div>
                <el-icon>
                    <plus />
                </el-icon>
                <!-- <p style="color:#999" class="m-b-0 m-t-10">添加封面</p> -->
                </div>
            </li>
        </ul>
    </el-form-item>
    <rel-image-medium
        ref="selectImageRef"
        :dialogRelImageVisible="selectImageDialog"
        :dialogRelImageTitle="selectImageTitle"
        :dialogRelImageFormData="selectImageFormData"
        dialogRelAction="createmedia"
        dialogSelectType="checkbox"
        @handleCancelRelImageDialog="selectImageCancelDialog"
        @reloadMediaData="selectImageComplete"
    />
</template>

<script>
    import {nextTick, reactive, ref, toRef} from 'vue'
   // import {Plus, CircleClose} from '@element-plus/icons'
    import RelImageMedium from '../Medium/RelImageMedium'
    export default {
        name: "",
        components: {RelImageMedium},
        props: {
            formData: {
                type: Object
            }
        },
        setup(props) {
            const localFormData = toRef(props,'formData')
            /*
            const imguploadthumbref = ref(null)
            const handleOnChange = (files, fileList) => {
                const filterRes = fileList.filter(f => f.name === files.name && f.size === files.size)
                filterRes.length > 1 && fileList.pop()
                localFormData.value.thumb = fileList
                // uploadImgObj['thumb'] =  = fileList
            }
            const handleOnRemove = (files, fileList) => {
                const filterRes = fileList.filter(f => f.name === files.name && f.size === files.size)
                filterRes.length > 1 && fileList.pop()
                localFormData.value.thumb = fileList
            }
            const handleRemove = (file) => {
                imguploadthumbref.value.handleRemove(file)
            }*/
            const handleDeleteImg = (index) => {
                localFormData.value.thumb.splice(index,1)
                console.log(localFormData.value.thumb)
            }
            // 图片弹窗
            const handleImageList = () => {
                selectImageDialog.value = true
                nextTick(() => {
                    selectImageRef.value.init()
                })
            }
            const selectImageRef = ref(null)
            const selectImageDialog = ref(false)
            const selectImageTitle = ref('选择封面')
            const selectImageFormData = reactive({
                datas:[]
            })
            const selectImageCancelDialog = () => {
                selectImageDialog.value = false
            }
            const selectImageComplete = (data) => {
                if( data && data.length > 0 ){
                    let imageDatas = localFormData.value.thumb
                    data.forEach((val) => {
                            console.log(imageDatas)
                        if(val.errcode == 0){
                            imageDatas.push({
                                name: val.data.imgid,
                                imgid: val.data.imgid,
                                url: val.data.viewurl
                            })
                            console.log(imageDatas)
                        }
                    })

                }
                // Object.assign(localFormData.value.thumb,)
            }

            return {
                localFormData,
                disabled: false,
                //imguploadthumbref,
                //handleOnChange,
                //handleOnRemove,
                //handleRemove,
                handleDeleteImg,
                handleImageList,
                selectImageRef,
                selectImageDialog,
                selectImageTitle,
                selectImageFormData,
                selectImageCancelDialog,
                selectImageComplete
            }
        }
    }
</script>

<style scoped lang="scss">
:deep(.upload-box .el-upload-list--picture-card .el-upload-list__item){
    margin-bottom: -15px;
}
:deep(.upload-box .el-upload--picture-card){
    border: none;
}
.imglist{
    display: flex;
    flex-wrap: wrap;
    li {
        position: relative;
        width: 160px;
        margin-right: 15px;
        margin-bottom: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        border:1px solid rgba(153,153,153,0.4);
        border-radius:4px;
        .edit-image{
        display: flex;
        position: absolute;
        bottom:0;
        right:0;
        padding: 4px 9px;
        color:#fff;
        font-size: 12px;
        background-color: rgba(0,0,0,0.6);
        };
        .delete-image {
        display: flex;
        position: absolute;
        top:0;
        right:0;
        padding: 3px;
        .el-icon{
            font-size:20px;
        }
        }
    }
    li.imgplus{
        >div{text-align: center;line-height:normal;}
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items: center;
        width: 160px;
        height: 160px; overflow: hidden;
        border: 1px dashed rgba(153,153,153,0.4);
        background: rgba(222,222,222,0.4); cursor: pointer;
        .el-icon{font-size: 28px;color:#999;}
    }
}
</style>
